import { Space } from '../layout/Space'
import { Stretch } from '../layout/Stretch'
import { FlexAlign } from '../layout/flex-box-store'

export const defaultButtonProps = {
  textAlign: FlexAlign.center,
  strech: 1,
  bgColor: '#fff',
  border: undefined
}
export function Button(props: {
  action?: string
  space?: number
  width?: number
  height?: number
  strech?: number
  label?: string
  textAlign?: FlexAlign
  border?: string
  borderRadius?: number
  fontSize?: number
  bgColor?: string
  color?: string
}) {
  const p = { ...defaultButtonProps, ...props }
  const style: { [x: string]: string | number | undefined } = {
    border: p.border,
    fontSize: p.fontSize,
    width: '100%',
    height: '100%',
    margin: 0,
    color: p.color,
    backgroundColor: p.bgColor,
    borderRadius: p.borderRadius,
    textAlign:
      p.textAlign === FlexAlign.center
        ? 'center'
        : p.textAlign === FlexAlign.start
          ? 'left'
          : 'right'
  }

  const content = <button style={style}>{props.label}</button>

  if (p.width && p.height) {
    return (
      <Space width={p.width} height={p.height}>
        {content}
      </Space>
    )
  }

  if (p.space) {
    return <Space value={p.space}>{content}</Space>
  }

  return <Stretch value={p.strech}>{content}</Stretch>
}
